<ix-page-header>
  <ix-search-input1 [value]="filterString" (search)="onListFiltered($event)"></ix-search-input1>
  <mat-slide-toggle
    color="primary"
    ixTest="show-built-in-users"
    [checked]="!hideBuiltinUsers"
    (change)="toggleBuiltins()"
  >
    <label [ixUiSearch]="searchableElements.elements.showBuiltIn">{{ 'Show Built-in Users' | translate }}</label>
  </mat-slide-toggle>

  <button
    mat-button
    ixTest="navigate-to-api-keys"
    (click)="navigateToApiKeys()"
  >
    {{ 'Api Keys' | translate }}
  </button>
  <button
    *ixRequiresRoles="requiredRoles"
    mat-button
    ixTest="add-user"
    [color]="'primary'"
    [ixUiSearch]="searchableElements.elements.add"
    (click)="doAdd()"
  >
    {{ 'Add' | translate }}
  </button>
</ix-page-header>

<div class="table-container" [ixUiSearch]="searchableElements.elements.list">
  <ix-table
    [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
    [emptyConfig]="emptyConfigService.defaultEmptyConfig((emptyType$ | async))"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider"
      [isLoading]="!!(isLoading$ | async)"
    >
      <ng-template let-user ix-table-details-row [dataProvider]="dataProvider">
        <ix-user-details-row
          [user]="user"
          (delete)="handleDeletedUser($event)"
        ></ix-user-details-row>
      </ng-template>
    </tbody>
  </ix-table>
  <ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
</div>
